<p-growl [(value)]="msgs" [sticky]="true"></p-growl>

<div [@pageAnimation] = "'in'">
  <my-breadcrumb name1="数据管理" name2="ng-primeng"></my-breadcrumb>

  <form   #form="ngForm" novalidate (ngSubmit)="form.form.valid && doLogin() " role="form">
    <p-panel header="面板">
      <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px">
        <div class="ui-grid-row">
          <div class="ui-grid-col-2">
            First Name *:
          </div>
          <div class="ui-grid-col-6">
            <input pInputText type="text" required  placeholder="Required"  [(ngModel)]="userNameModel" name="userName" #userName="ngModel"/>
          </div>
          <div class="ui-grid-col-4" *ngIf="form.submitted && !userName.valid">
            <div class="ui-message ui-messages-error ui-corner-all">
              <i class="fa fa-close"></i>
              Firstname is required
            </div>
          </div>
        </div>

        <div class="ui-grid-row">
          <div class="ui-grid-col-2"></div>
          <div class="ui-grid-col-6">
            <button pButton type="submit" label="Submit" ></button>
          </div>
          <div class="ui-grid-col-4"></div>
        </div>
      </div>
    </p-panel>
  </form>
</div>

